<template>
  <PublicPage
    pageName="奖金池"
    :borderType="true"
    :showNav="true"
    pageBgcolor="#FF262C"
  >
    <view class="prizePool">
      <view class="px32">
        <swiper
          class="swiperBox"
          autoplay
          vertical 
          circular
          disable-touch
          :interval="1500"
          :display-multiple-items="3"
          :current="current"
          @change="_currentChange"
        >
          <swiper-item v-for="(item,index) in prizeObj.scrollMessageList" :key="index" @touchmove.stop> 
            <view class="u-p-t-10 u-p-b-10 u-flex">
              <view class="swiperItem" :class="current === index ? 'index0' : (((current+1)%prizeObj.scrollMessageList.length) === index ? 'index1' : (((current+2)%prizeObj.scrollMessageList.length) === index ? 'index2' : 'index3'))">
                <view class="u-flex" v-if="_isFan(item)"><view>您的好友“</view><view class="ov1" style="max-width:200rpx;">{{item}}</view><view>”已成功提现</view></view>
                <view class="u-flex" v-else><view class="ov1" style="max-width:260rpx;">{{item}}</view><view>已成功提现</view></view>
              </view>
            </view>
          </swiper-item>
        </swiper>

        <view
          class="centerBox"
          @click="navigateTo({ url: '/pagesB/advertiseChild/bonusCenter' })"
        >
          <view class="justify-between poabBox">
            <view class="themeFontColor">提现额度:{{prizeObj.receiveQuota || 0}}</view>
            <view class="viceColor fz-12 textDecoration">奖金记录</view>
          </view>
          <view>
            <view class="flex-row pliceBix">
              <view class="fz-14 u-p-b-5">￥</view>
              <view>{{prizeObj.totalBonus || 0}}</view>
              <view><icon class="iconfont icon-lock fz-20" style="color:#FB9551;" /></view>
            </view>
            <view class="u-flex endTimeBox" v-if="endTimeObj.code == 201">
              第{{prizeObj.periods}}期已结束，请前往奖金记录领取奖金
            </view>
            <view class="u-flex endTimeBox" v-else>
              <text class="u-p-r-8" v-if="endTimeObj.day">{{endTimeObj.day}}天</text>
              <view class="timeBg">{{endTimeObj.hour}}</view>
              <text>:</text>
              <view class="timeBg">{{endTimeObj.minute}}</view>
              <text>:</text>
              <view class="timeBg">{{endTimeObj.second}}</view>
              <text>.</text>
              <view class="timeBg">
                  <u-count-to
                  :start-val="9"
                  :end-val="0" 
                  :duration="1000" 
                  :use-easing="false" 
                  color="#ffffff" 
                  font-size="24" 
                  ref="countTo" 
                  @end="_countToFn">
                  </u-count-to>
              </view>
              后结束
            </view>
          </view>
        </view>
        <view style="height: 32rpx"></view>
        <view class="bottomBtn" @click="navigateTo({url: `/pagesB/advertiseChild/missionCenter`})">
          <image
            src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/advertiseBannerBtn.png"
            mode="widthFix"
            style="width: 100%; height: auto; display: block"
          />
        </view>
        <view style="height: 20rpx"></view>
      </view>

      <view class="rulsIllustrate" @click="navigateTo({ url: '/pagesB/advertiseChild/rulesDetails' })">规则说明</view>
    </view>
  </PublicPage>
</template>

<script>
import publicPage from "@/components/publicPage/index.vue";
import mini from "@/api/mini.js";
import { currentTime,getRemainderTime } from "@/utils/formTime.js";

export default {
  components: {
    publicPage,
  },
  data(){
    return {
      current: 0,
      timer: null, // 定时器
      endTimeObj: {
        day: 0,
        hour: "00",
        minute: "00",
        second: "00"
      },
      prizeObj: {}
    }
  },
  onLoad(){
    if (this.timer) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.timer); 
    }
  },
  onShow(){
    mini.getPoolInfo().then(res=>{
      if(!res.data.scrollMessageList){
        res.data.scrollMessageList = []
      }

      this.prizeObj = res.data

      if(this.prizeObj.scrollMessageList.length < 4){
        this.prizeObj.scrollMessageList.push("书****") 
        this.prizeObj.scrollMessageList.push("哪****")
        this.prizeObj.scrollMessageList.push("天****")
        this.prizeObj.scrollMessageList.push("吴****")
      }
      
      this.endTimeObj = this.getRemainderTime(this.currentTime(),this.prizeObj.endTime)
      this.timer = setInterval(() => {
        this.endTimeObj = this.getRemainderTime(this.currentTime(),this.prizeObj.endTime)
      }, 1000);
    })
  },
  methods:{
    currentTime, // 获取当前时间
    getRemainderTime, // 计算两个时间的时间差
    _currentChange(e){
      this.current = e.detail.current
    },
    _countToFn(){
      this.$refs.countTo.start()
    },
    _isFan(item){
      if(item.indexOf("****") !== -1){
        return false
      }else{
        return true
      }
    }
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer); 
    }
  },
};
</script>
<style lang="scss" scoped>
.prizePool {
  height: 100%;
  background-image: url("https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/advertiseBannerBG.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .swiperBox {
    height: 204rpx !important;
    .swiperItem {
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      color: #FFF;
      padding: 0 24rpx;
      display: flex;
    }
    .index0{
      background: rgba(0, 0, 0, 0.4);
      opacity: 0.2;
    }
    .index1{
      background: rgba(0, 0, 0, 0.4);
      opacity: 0.6;
    }
    .index2{
      background: rgba(0, 0, 0, 0.4);
      opacity: 1;
    }
    .index3{
      opacity: 0;
    }
  }

  .centerBox {
    height: 336rpx;
    background-image: url("https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/advertiseCart.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 32rpx 40rpx 40rpx 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-top: 20rpx;
    .textDecoration {
      text-decoration: underline;
    }
    .poabBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      padding: 32rpx 40rpx 40rpx 40rpx;
    }
    .pliceBix {
      color: #e44435;
      font-size: 48rpx;
      font-weight: 600;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 50rpx;
    }
    .endTimeBox {
      background: #fce3c5;
      border-radius: 32rpx;
      color: #e44435;
      padding: 10rpx 24rpx;
      font-size: 24rpx;
      .timeBg {
        background: #f1521b;
        border-radius: 8rpx;
        color: #ffffff;
        min-width: 36rpx;
        text-align: center;
        margin: 0 8rpx;
      }
    }
  }
  .bottomBtn {
    border-radius: 90rpx;
    box-shadow: 0 8rpx 32rpx rgba(147, 13, 38, 0.68);
  }

  .rulsIllustrate{
    background: rgba(50, 50, 51, 0.6);
    border-radius: 32rpx 0px 0px 32rpx;
    color: #FFF;
    position: fixed;
    right: 0;
    width: 152rpx;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    text-align: center;
    top: 13%;
  }
}
</style>